<template>
  <div class="app-container">
    <div class="goHome">
      <router-link to="/">
        <el-dropdown-item>返回首页</el-dropdown-item>
      </router-link>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-tabs v-model="activeTab" class="my-tab">
            <el-tab-pane label="个人信息" name="activity">
              <activity />
            </el-tab-pane>
            <el-tab-pane v-if="editPassword" label="修改密码" name="account">
              <account />
            </el-tab-pane>
          </el-tabs>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import Activity from './components/Activity'
import Account from './components/Account'

export default {
  name: 'Profile',
  components: { Activity, Account },
  data() {
    return {
      activeTab: 'activity',
      editPassword: false
    }
  },
  created() {
    const user = this.$store.getters.userInfo
    if (user.roles.indexOf('superAdmin') !== 0) {
      this.editPassword = true
      return
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  background: #dce1e8;
  padding: 10px;
  .goHome {
    display: inline-block;
    padding: 0 !important;
    margin-bottom: 10px;
  }
}
.el-tabs.el-tabs--top {
  padding: 0 10px;
}
</style>
